<template>
	<view class="xiangqing" v-if="userinfo">
		<!-- <view class="fanhui text-white">
			<view class="wlIcon-fanhui5"></view>
		</view> -->
		<swiper class="swiper" :current="currIndex" indicator-dots :autoplay="!autoplay" circular :duration="1000" @change="itemChange">
			<swiper-item class="swiper-item" @click="BoFang()" v-if="userinfo.videos_list && userinfo.videos_list.length > 0">
				<video id="myVideo" class="lb-image" :poster="userinfo.images_list[0]" :src="userinfo.videos_list[0]"></video>
			</swiper-item>
			<swiper-item v-for="(item, index) in userinfo.images_list" class="swiper-item" :key="index">
				<image class="lb-image" :id="'wrap' + index" :src="item" mode="aspectFit" />
			</swiper-item>
		</swiper>
		<view class="fx flex justify-between align-center">
			<view class="">
				{{ userinfo.code }}号
				<text class="name">{{ userinfo.realname }}</text>
			</view>
			<view class="flex align-center" @tap="showModal('share')">
				<text class="wlIcon-fenxiangcopy"></text>
				<view class="margin-left-sm margin-right">分享</view>
			</view>
			<view class="flex align-center" @tap="$wanlshop.on('/pages/index')">
				<text class="wlIcon-31shouye"></text>
				<view class="margin-left-sm margin-right">回到首页</view>
			</view>
		</view>
		<view class="num-list">
			<view class="flex flex-direction align-center">
				<view class="num">{{ userinfo.ranking }}</view>
				<view class="text">排名</view>
			</view>
			<view class="line"></view>
			<view class="flex flex-direction align-center">
				<view class="num">{{ userinfo.vote }}</view>
				<view class="text">票数</view>
			</view>
			<view class="line"></view>
			<view class="flex flex-direction align-center">
				<view class="num">{{ userinfo.paent_vote }}</view>
				<view class="text">距离上一名</view>
			</view>
		</view>
		<view class="btn-list">
			<view class="btn-home" @click="guanzhu">
				<view class="bg flex align-center justify-center" v-if="userinfo.is_fowole == 0">+关注</view>
				<view class="bg qx flex align-center justify-center" v-else>取消关注</view>
			</view>
			<view class="btn-cx flex align-center justify-center" @click="tp">我要投票</view>
		</view>
		<view class="phb-box">
			<view class="phb-title flex align-center justify-around">选手描述</view>
			<view class="phb-list">
				<view class="title-box">
					<view class="title">参赛宣言：</view>
					<view class="con">{{ userinfo.entry_declaration }}</view>
				</view>
				<view class="title-box">
					<view class="title">才艺优势：</view>
					<view class="con">{{ userinfo.talent }}</view>
				</view>
				<view class="title-box">
					<view class="title">身材信息：</view>
					<view class="con">
						<view class="">身高：{{ userinfo.height }}</view>
						<view class="">体重：{{ userinfo.weight }}</view>
						<view class="">三围：{{ userinfo.three_dimensions }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pl-box phb-box">
			<view class="phb-title flex align-center justify-around">精彩评论</view>
			<view class="phb-list-box">
				<view class="phb-list flex align-center justify-between" v-for="(item, index) in pinglunList" :key="index">
					<view class="flex align-center">
						<view class="user-img flex justify-center align-center">
							<image class="img" :src="item.avatar" mode=""></image>
						</view>
						<view class="pl-xq">
							<view class="name">{{ item.realname }}</view>
							<view class="pl">{{ item.desc }}</view>
						</view>
					</view>
					<view class="flex flex-direction justify-center align-center" @click="dz(index)">
						<image :src="item.self_like == 1 ? '../../static/images/xiangqing/dz_1.png' : '../../static/images/xiangqing/dz.png'" class="dz-img"></image>
						<!-- <view :class="[ ? 'wlIcon-likes' : '']"></view> -->
						<view class="text-center">{{ item.like_nums }}</view>
					</view>
				</view>
			</view>
			<view class="search-box">
				<view class="search">
					<view class="bg flex align-center">
						<input class="search-input" placeholder-style="color: rgba(255, 255, 255, 0.35);" placeholder="帮她拉拉票吧~" type="text" v-model="plText" />
						<view class="search-btn flex align-center justify-center" @click="fbpl">发布</view>
					</view>
				</view>
			</view>
		</view>
		<view class="WANL-MODAL">
			<!-- 分享 -->
			<view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share
						ref="wanlShare"
						page="pages/xiangqing/xiangqing"
						:image="userinfo.images_list[0]"
						:VImg="userinfo.poster"
						:scene="{ id: page_id, yqmId: user.id, qr: 'p' }"
						:scrollAnimation="scrollAnimation"
						:shareTitle="`我是第36届世界超级小姐大赛的${userinfo.code}号${userinfo.realname},请大家为我投一票.`"
						:shareText="pageData.params.navigationBarTitleText"
						@change="hideModal"
					/>
				</view>
			</view>
		</view>
		<uni-popup style="z-index: 999; height: auto" ref="popup" type="bottom" :mask-click="false" :is-mask-click="false">
			<view class="popup-content">
				<view class="close" @click="close">x</view>
				<scroll-view style="height: 0; flex: 1" scroll-y>
					<view class="nav">
						<text :class="['t', navIndex == 0 ? 's' : '']" @click="setnavIndex(0)">赠送礼物</text>
						<text v-if="spShow" :class="['t', navIndex == 1 ? 's' : '']" @click="setnavIndex(1)">购物赠票</text>
					</view>
					<view class="search" v-if="navIndex == 1">
						<view class="bg flex align-center">
							<input class="search-input" placeholder-style="color: rgba(255, 255, 255, 0.35);" placeholder="商品名称搜索" type="text" value="" />
							<view class="search-btn flex align-center justify-center">
								<text class="wlIcon-search"></text>
							</view>
						</view>
					</view>
					<view class="lw-box">
						<view class="lw-list">
							<view class="lw-items" v-for="(item, index) in lwList" :key="item.id" @click="zs(index)">
								<view :class="['lw-item', lwIndex == index ? 's' : '']">
									<view class="image-box">
										<image class="image" :src="navIndex == 0 ? item.image : item.goods_img"></image>
									</view>
									<view class="name" v-if="navIndex == 1">{{ item.name || '暂无名称' }}</view>
									<view class="jg">
										<view class="p" v-show="lwIndex != index">{{ navIndex == 0 ? item.ticket : item.price }}票</view>
										<view class="q">{{ navIndex == 0 ? item.price : item.goods_price }}元</view>
										<view class="qe" v-show="lwIndex == index">赠送{{ navIndex == 0 ? item.ticket : item.price }}票</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="xieyi-box flex justify-center align-center" v-if="navIndex == 0">
						<label class="radio flex justify-center align-center" @click="lwXy = !lwXy">
							<radio class="radios" :checked="lwXy" />
							<view class="">
								已阅读并同意
								<text class="x" @tap="onDetails('5', '赠送礼物协议')">《赠送礼物协议》</text>
							</view>
						</label>
					</view>
					<!-- <view class="num-box flex justify-between">
						<view class="zs">{{ navIndex == 0 ? '赠送数量' : '购买数量' }}:</view>
						<view class="flex">
							<view :class="['jia', lwNum <= 1 ? 'disabled' : '']" @click="lwNum > 1 ? lwNum-- : ''">-</view>
							<input min="1" class="num" type="number" v-model="lwNum" />
							<view class="jian" @click="lwNum++">+</view>
						</view>
					</view>
					
					<view class="btn-baoming flex justify-center align-center" @click="zs">立即赠送</view> -->
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			autoplay: false,
			id: null,
			userinfo: null,
			currIndex: 0,
			imgList: [''],
			navIndex: 0,
			pinglunList: [],
			plText: '',
			lwList: [],
			lwIndex: null,
			lwNum: 1,
			lwXy: true,
			page_id: null,

			// 页面参数
			pageData: {
				params: {
					navigationBarTitleText: '加载中..',
					share_title: '分享'
				},
				style: {}
			},
			modalName: '',
			scrollAnimation: 300,
			pagesNum: 0,
			spShow: false
		};
	},
	onReady() {
		// #ifndef MP-ALIPAY
		this.videoContext = uni.createVideoContext('myVideo');
		// #endif
	},
	computed: {
		...mapState(['common', 'user'])
	},
	onLoad(e) {
		this.id = e.id;
		this.pagesNum = getCurrentPages().length; // 1.1.9 升级
		// 判断是否小程序来源 1.1.9升级
		if (e.hasOwnProperty('scene')) {
			let scene = decodeURIComponent(e.scene);
			scene = this.$wanlshop.getParam(scene);
			this.page_id = scene.id;
		} else {
			this.page_id = e.id;
		}
		this.getUserInfo();
		this.pinglun();
	},
	onShow() {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor: this.pageData.style.navigationBarTextStyle,
				backgroundColor: this.pageData.style.navigationBarBackgroundColor
			});
		}, 200);
	},
	methods: {
		itemChange(e) {
			if (e.detail.current != 0) {
				this.autoplay = false;
				this.videoContext.pause();
			}
		},
		BoFang() {
			if (this.autoplay == false) {
				this.autoplay = true;
				this.videoContext.play();
			} else {
				this.autoplay = false;
				this.videoContext.pause();
			}
		},

		dz(index) {
			uni.request({
				url: `/wanlshop/activity/Index/commonLike?common_id=${this.pinglunList[index]['id']}`,
				method: 'GET',
				success: (res) => {
					this.pinglun();
				}
			});
		},
		// 弹出层
		showModal(name) {
			console.log(this.pageData);

			// 滚动下分享
			setTimeout(() => {
				this.scrollAnimation = 0;
			}, 300);
			this.modalName = name;
		},
		hideModal() {
			// 强制关闭海报
			if (this.modalName == 'share') {
				this.$refs.wanlShare.closePoster();
			}
			this.modalName = null;
		},
		zs(index) {
			if (index != this.lwIndex) {
				this.lwIndex = index;
				return;
			}
			if (!this.lwXy) {
				uni.showToast({
					icon: 'none',
					title: `请查看底部礼物协议并同意`
				});
				return;
			}
			if (this.lwIndex == null) {
				uni.showToast({
					icon: 'none',
					title: `请选择${this.navIndex == 0 ? '礼物' : '商品'}`
				});
				return;
			}
			// if (this.lwNum <= 0) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: `${this.navIndex == 0 ? '礼物' : '商品'}数量不能小于0`
			// 	});
			// 	return;
			// }
			this.navIndex == 0
				? uni.request({
						url: `/wanlshop/activity/Index/createGif?gift_id=${this.lwList[this.lwIndex]['id']}&number=${this.lwNum}&pay_type=wechat&user_player_id=${
							this.id
						}&method=mp`,
						method: 'GET',
						success: (res) => {
							this.$wanlshop.to(`/pages/user/money/pay?token=${res.data.token}&type=lw&data=${JSON.stringify(res.data.list)}`);
							// this.$jssdk.wxpay({
							// 	data: res.data,
							// 	success: (e) => {
							// 		console.log(e);
							// 		this.$wanlshop.msg('支付成功');
							// 	},
							// 	fail: (err) => {
							// 		if (err.errMsg == 'chooseWXPay:ok') {
							// 			this.$wanlshop.msg('支付成功');
							// 		} else if (err.errMsg == 'chooseWXPay:cancel') {
							// 			this.$wanlshop.msg('支付失败，取消支付');
							// 		} else if (err.errMsg == 'chooseWXPay:fail') {
							// 			this.$wanlshop.msg('支付失败');
							// 		}
							// 	}
							// });
						}
				  })
				: uni.request({
						url: `/wanlshop/activity/Index/createGoods?goods_id=${this.lwList[this.lwIndex]['wanlshop_goods_id']}&number=${this.lwNum}&user_player_id=${this.id}`,
						method: 'GET',
						success: (res) => {
							this.$store.commit('statistics/order', {
								pay: this.$store.state.statistics.order.pay + res.data.list.length,
								whole: this.$store.state.statistics.order.whole + res.data.list.length
							});
							this.$wanlshop.to(`/pages/user/money/pay?token=${res.data.token}&data=${JSON.stringify(res.data.list)}`);
						}
				  });
		},
		async tp() {
			let [err, r] = await uni.request({
				url: `/wanlshop/activity/Index/getActiviGoods`,
				method: 'POST',
				data: {
					player_id: this.id
				}
			});
			this.spShow = r.data.total > 0;
			uni.request({
				url: `/wanlshop/activity/Index/getActiviGif`,
				method: 'POST',
				success: (res) => {
					console.log(res.data);
					this.lwIndex = null;
					this.navIndex = 0;
					this.lwList = res.data.data;
					this.$refs.popup.open('bottom');
				}
			});
		},
		close() {
			this.getUserInfo();
			this.$refs.popup.close();
		},
		setnavIndex(index) {
			uni.request({
				url: `/wanlshop/activity/Index/${index == 0 ? 'getActiviGif' : 'getActiviGoods'}`,
				method: 'POST',
				data: {
					player_id: this.id
				},
				success: (res) => {
					this.lwIndex = null;
					this.lwList = res.data.data;
					this.navIndex = index;
				}
			});
		},
		getUserInfo() {
			uni.request({
				url: `/wanlshop/activity/Index/getplayerDetail?id=${this.id}`,
				method: 'GET',
				success: (res) => {
					console.log(res.data);
					this.userinfo = res.data;
				}
			});
		},
		guanzhu() {
			uni.request({
				url: `/wanlshop/activity/Index/addFollw?userplayer_uid=${this.userinfo.user_id}`,
				method: 'GET',
				success: (res) => {
					console.log(1111, res);
					this.userinfo.is_fowole = this.userinfo.is_fowole == 0 ? 1 : 0;
				}
			});
		},
		pinglun() {
			uni.request({
				url: `/wanlshop/activity/Index/paycomment?player_id=${this.id}`,
				method: 'GET',
				success: (res) => {
					console.log(1111, res);
					this.pinglunList = res.data.data;
				}
			});
		},
		fbpl() {
			let data = {
				player_id: this.userinfo.id,
				desc: this.plText
			};
			uni.request({
				url: `/wanlshop/activity/Index/addpaycomment`,
				data,
				method: 'POST',
				success: (res) => {
					console.log(1111, res);
					this.plText = '';
					this.pinglun();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.xiangqing {
	padding-bottom: 50rpx;
	min-height: 100vh;
	background-color: $bg1;
	position: relative;
	.fanhui {
		position: absolute;
		z-index: 99;
		top: 20rpx;
		left: 20rpx;
		font-size: 50rpx;
	}
	.swiper {
		width: 750rpx;
		height: 500rpx;
		.swiper-item {
			overflow: hidden;
			width: 750rpx;
			height: 100%;
		}

		.lb-image {
			height: 100%;
			// width: 750rpx;
		}
	}
	// .swiper {
	// 	width: 750rpx;
	// 	height: 500rpx;
	// 	.swiper-item {
	// 		width: 750rpx;
	// 		height: 500rpx;
	// 	}
	// 	.lb-image {
	// 		width: 750rpx;
	// 	}
	// }
	.fx {
		box-sizing: border-box;
		padding: 0 34rpx;
		width: 100%;
		height: 100rpx;
		font-size: 30rpx;
		font-weight: 900;
		letter-spacing: 1.5rpx;
		color: rgba(255, 255, 255, 1);
		background: rgba(44, 28, 84, 1);
		.name {
			margin-left: 10rpx;
		}
	}
	.num-list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 162rpx;
		background-color: rgba(23, 5, 35, 1);

		.line {
			height: 100rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.05);
		}

		.num {
			font-size: 34rpx;
			font-weight: 900;
			letter-spacing: 1.7rpx;
			line-height: 47.6rpx;
			color: rgba(223, 39, 233, 1);
		}

		.text {
			font-size: 24rpx;
			font-weight: 500;
			letter-spacing: 1.2rpx;
			line-height: 33.6rpx;
			color: rgba(255, 255, 255, 0.75);
		}
	}
	.btn-list {
		padding: 28rpx;
		display: flex;
		color: #fff;
		font-size: 30rpx;
		font-weight: 500;
		letter-spacing: 1.5rpx;
		line-height: 42rpx;
		.btn-cx {
			margin-left: 20rpx;
			flex: 2;
			margin-bottom: 20rpx;
			width: 520rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 10rpx;
			background: linear-gradient(90deg, rgba(170, 40, 248, 1) 0%, rgba(104, 65, 250, 1) 100%);
		}
		.btn-home {
			flex: 1;
			width: 520rpx;
			height: 80rpx;
			border-radius: 10rpx;
			padding: 2rpx;
			background: linear-gradient(90deg, rgba(104, 65, 250, 1) 0%, rgba(170, 40, 248, 1) 100%);
			.bg {
				color: rgba(170, 40, 248, 1);
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
				background: $bg1;
			}
			.qx {
				color: rgba(105, 94, 139, 1);

				border: 2rpx solid rgba(59, 37, 124, 1) !important;
				background-color: rgba(59, 37, 124, 1) !important;
			}
		}
	}

	.phb-box {
		position: relative;
		z-index: 10;
		margin: 0 auto;
		margin-top: -20rpx;
		margin-bottom: 50rpx;
		width: 700rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: linear-gradient(180deg, rgba(110, 63, 250, 1) 0%, rgba(163, 43, 248, 1) 100%);
		padding: 4rpx;
		.phb-title {
			height: 74rpx;
			font-size: 26rpx;
			font-weight: 500;
			letter-spacing: 1.3rpx;
			color: rgba(255, 255, 255, 1);
		}
		.phb-list {
			background: rgba(23, 5, 35, 1);
			font-size: 26rpx;
			font-weight: 900;
			letter-spacing: 1.3rpx;
			line-height: 36.4rpx;
			color: rgba(255, 255, 255, 1);
			padding: 30rpx;
			.title-box {
				margin-bottom: 50rpx;
				.title {
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 1.4rpx;
					line-height: 39.2rpx;
					color: rgba(255, 255, 255, 1);
					&::after {
						content: ' ';
						display: block;
						width: 112rpx;
						height: 4rpx;
						opacity: 1;
						background: linear-gradient(270deg, #aa28f8 0%, #6e3ffa 100%);
					}
				}
				.con {
					margin-top: 10rpx;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 1.4rpx;
					line-height: 39.2rpx;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
	.pl-box {
		.search-box {
			padding: 50rpx 0;
			background-color: #170523;
		}
		.phb-list-box {
			padding: 0 20rpx;
			background-color: #170523;
		}
		.search {
			margin: 0 auto;
			width: 640rpx;
			height: 88rpx;
			border-radius: 10rpx;
			padding: 4rpx;
			background: linear-gradient(90deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
			.bg {
				position: relative;
				border-radius: 10rpx;
				background-color: $bg1;
				width: 100%;
				height: 100%;
			}
			.search-input {
				background-color: $bg1;
				flex: 1;
				height: 100%;
				padding: 20rpx;
				padding-right: 88rpx;
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 1.4rpx;
				line-height: 39.2rpx;
				color: #fff;
			}
			.search-btn {
				position: absolute;
				right: -4rpx;
				color: #fff;
				font-size: 40rpx;
				border-radius: 0 10rpx 10rpx 0;
				width: 126rpx;
				height: 88rpx;
				background: linear-gradient(270deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
			}
		}
		.phb-list {
			border-bottom: 2rpx solid #271951;
		}
		.user-img {
			width: 64rpx;
			height: 64rpx;
			background-color: #6e3ffa;
			border-radius: 50%;
			.img {
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
			}
		}
		.pl-xq {
			margin-left: 20rpx;

			.name {
				font-size: 26rpx;
				font-weight: 500;
				letter-spacing: 1.3rpx;
				line-height: 36.4rpx;
				color: rgba(123, 121, 129, 1);
			}
			.pl {
				font-size: 26rpx;
				font-weight: 500;
				letter-spacing: 1.3rpx;
				line-height: 36.4rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
	.popup-content {
		background-color: #170523;
		padding: 26rpx;
		height: calc(100vh - 600rpx);
		display: flex;
		flex-direction: column;
		border-radius: 20rpx 20rpx 0 0;
		border-top: 1px solid #fff;
		.close {
			text-align: right;
			font-size: 30rpx;
			color: #fff;
			padding: 10rpx;
		}
		.nav {
			font-size: 34rpx;
			font-weight: 900;
			letter-spacing: 1.7rpx;
			line-height: 47.6rpx;
			color: rgba(142, 116, 158, 1);
			.t {
				margin-right: 20rpx;
			}
			.s {
				color: rgba(223, 39, 233, 1);
			}
		}
		.search {
			margin: 34rpx auto;
			width: 700rpx;
			height: 88rpx;
			border-radius: 10rpx;
			padding: 4rpx;
			background: linear-gradient(90deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
			.bg {
				position: relative;
				border-radius: 10rpx;
				background-color: $bg1;
				width: 100%;
				height: 100%;
			}
			.search-input {
				background-color: $bg1;
				flex: 1;
				height: 100%;
				padding: 20rpx;
				padding-right: 88rpx;
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 1.4rpx;
				line-height: 39.2rpx;
				color: #fff;
			}
			.search-btn {
				position: absolute;
				right: -4rpx;
				color: #fff;
				font-size: 40rpx;
				border-radius: 0 10rpx 10rpx 0;
				width: 74rpx;
				height: 88rpx;
				background: linear-gradient(270deg, rgba(170, 40, 248, 1) 0%, rgba(96, 69, 251, 1) 100%);
			}
		}
		.lw-box {
			margin: 50rpx 0;
			.lw-list {
				display: flex;
				flex-wrap: wrap;
			}
			.lw-items {
				width: 33.3%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.lw-item {
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				width: 216rpx;
				border: 2rpx solid #581d7c;
				&.s {
					border: 2rpx solid #df27e9 !important;
					.image {
						transform: scale(1.05);
					}
					.jg {
						.p {
							font-size: 0.8em;
						}
						.q {
							padding: 5rpx 0;
						}
						.qe {
							color: #fff;
							width: 100%;
							flex: 1;
							display: flex;
							justify-content: center;
							align-items: center;
							background: linear-gradient(90deg, #df27e9 0%, #a829f8 100%);
						}
					}
					.name {
						// background: #a829f8;
					}
				}
				.image-box {
					width: 216rpx;
					height: 190rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.image {
						transition: all 0.5s ease-in;
						width: 150rpx;
						height: 160rpx;
					}
				}
				.name {
					background: #000000;
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 33.6rpx;
					color: rgba(255, 255, 255, 1);
					padding: 10rpx 0;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}
				.jg {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 96rpx;
					opacity: 1;
					background: linear-gradient(90deg, #2a1b57 0%, #382345 100%);
					.p {
						font-size: 30rpx;
						font-weight: 900;
						letter-spacing: 1.5rpx;
						line-height: 42rpx;
						color: rgba(255, 255, 255, 1);
					}
					.q {
						font-size: 24rpx;
						font-weight: 500;
						letter-spacing: 1.2rpx;
						line-height: 33.6rpx;
						color: rgba(202, 173, 221, 1);
					}
				}
			}
		}
		.num-box {
			.zs {
				font-size: 24rpx;
				font-weight: 500;
				letter-spacing: 1.2rpx;
				color: rgba(255, 255, 255, 1);
			}
			.jia,
			.jian {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 38rpx;
				height: 52rpx;
				border-radius: 10rpx;
				color: #fff;
				background: linear-gradient(270deg, #aa28f8 0%, #6e3ffa 100%);
			}
			.disabled {
				background: #581d7c;
			}

			.num {
				text-align: center;
				color: #fff;
				margin: 0 10rpx;
				border: 2rpx solid #df27e9;
				width: 120rpx;
				height: 52rpx;
				border-radius: 10rpx;
			}
		}
		.xieyi-box {
			height: 120rpx !important;
			font-size: 26rpx;
			font-weight: 500;
			letter-spacing: 1.3rpx;
			color: rgba(255, 255, 255, 1);
			.radios {
				transform: scale(0.7);
			}
			.x {
				/** 文本2 */
				font-size: 26rpx;
				font-weight: 500;
				letter-spacing: 1.3rpx;
				color: rgba(110, 63, 250, 1);
			}
		}

		.btn-baoming {
			font-size: 32rpx;
			font-weight: 900;
			letter-spacing: 1.6rpx;
			color: rgba(255, 255, 255, 1);
			margin: 20rpx auto;
			width: 700rpx;
			height: 100rpx;
			opacity: 1;
			border-radius: 10rpx;
			background: linear-gradient(90deg, rgba(90, 71, 251, 1) 0%, rgba(162, 43, 248, 1) 100%);
		}
	}
}
.dz-img {
	width: 40rpx;
	height: 40rpx;
}
</style>
